<template>
	<el-image class="el-image" style="width: 60px; height: 60px" :src="logo"></el-image><br />
	<div class="body">

		<div id="background">
			<el-carousel ref="carousel" height="600px">
				<el-carousel-item v-for="item in array" :key="item">
					<img class="img" :src="item.imagePath">
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="register-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
			<el-form :rules="rules" :model="registerData">
				<div class="top">
					<h2>邮箱注册</h2>
				</div>
				<el-form-item prop="email" label="邮箱:">
					<el-input type="email" @blur="emailBlur()" v-model="registerData.email" placeholder="请输入邮箱">
					</el-input>
				</el-form-item>
				<el-form-item prop="password" label="密码:">
					<el-input type="password" @blur="checkPasswordBlur()" v-model="registerData.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="确认密码:">
					<el-input type="password" @blur="checkPasswordBlur()" v-model="registerData.confirmPassword" placeholder="确认密码"></el-input>
					<span class="passwordMessage" v-text="passwordMessage"></span>
				</el-form-item>
				<!-- <el-form-item label="邮箱验证码:">
					<el-input v-model="registerData.inputCheckCode" placeholder="验证码"></el-input>
					<el-button type="primary" v-model="checkCode" @click="sendEmail()" plain :loading="btnLoading" count=60
						class="fasong">{{interCount}}
					</el-button>
					
				</el-form-item> -->

				<el-form-item label="邮箱验证码:">
					<!-- @blur="checkCodeBlur()" -->
					<el-input  v-model="registerData.inputCheckCode" placeholder="验证码">
						<template #append>
							<el-button @click="sendEmail()" plain :loading="btnLoading" count=60 class="fasong">
								{{interCount}}
							</el-button>
						</template>
					</el-input>
				</el-form-item>


				<el-form-item label="邀请码（可选）:">
					<el-input v-model="registerData.invitationCode" placeholder="邀请码"></el-input>
				</el-form-item>
				<el-switch v-model="switchBtn" active-text="同意所有条款">
				</el-switch><br><br>
				<div class="register-button">
					<el-button type="primary" @click="register()" >注 册</el-button>
					<el-button type="primary" @click="login()">去登录</el-button>
					<!-- <el-row class="mb-4"></el-row> -->
				</div>
				
			</el-form>
		</div>
	</div>
</template>
<script>
	//显示本地图片: 方法一:引入图片文件;方法二:使用<img/>标签
	import logo from '@/assets/logo.png'
	import qs from 'qs'
	// import storeUtil from '../utils/localstorage'
	export default {
		name: "Register",
		data() {
			return {
				logo:logo,
				passwordMessage:'',
				array: [],
				registerData: {
					email: '', //邮箱

					password: '',
					confirmPassword: '',
					checkCode: '', //邮箱验证码
					inputCheckCode: '', //输入的验证码
					invitationCode: '', //邀请码
				},
				rules: {
					email:{
						required: true,
						message: '您还没有输入电子邮箱',
						trigger: 'blur'
					},
					password: {
						required: true,
						message: '您还没有输入密码',
						trigger: 'blur'
					},
					confirmPassword: {
						required: true,
						message: '您还没有输入确认密码',
						trigger: 'blur'
					},
					// email:{
					// 	required: true,
					// 	message: '您还没有输入电子邮箱',
					// 	trigger: 'change'
					// },
					// email: [{
					// 	required: true,
					// 	message: '您还没有输入电子邮箱',
					// 	trigger: 'change'
					// }]
				},
				interCount: '发送',
				btnLoading: false,
				ableRegister:false,
				switchBtn:false
			}
		},
		mounted() {
			this.getAllCarousel();
		},
		methods: {
			//查询所有轮播图
			getAllCarousel() {
				this.$axios.post('/api/carousel/getAll')
					.then(data => {
						this.array = data.list;
						this.$refs.carousel.next();
					})
			},
			//邮箱失去焦点事件
			emailBlur() {
				// console.log("blur")
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (!this.registerData.email) {
					// alert("");
					//已经全局加载了element-plus
					
					
					this.$message({
						message: "请输入邮箱",
						type: 'error'
					})
					return;
				} else if (this.registerData.email != '' && !regEmail.test(this.registerData.email)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.registerData.email = ''
					return;
				}

				let data = qs.stringify(this.registerData)
				// console.log("data="+data)
				this.$axios.post('/api/user/checkEmail', data)
					.then(data => {
						console.log("data.message=" + data.message)
						if (data.message == '该邮箱可以注册') {
							this.$message({
								message: '该邮箱可以注册',
								type: 'success'
							})
						} else {
							this.$message({
								message: '该邮箱已经注册',
								type: 'error'
							})
						}
						// this.$message({
						// 	message: '注册成功,进入登录页面',
						// 	type: 'success'
						// })
						//在前端保存以上两个值，用
					}).catch(error => {
						console.log(error);
					})
			},
			checkPasswordBlur(){//密码失去焦点事件
				//密码规则：1 长度8-16位 2.包含字母和数字  3.前后不能有空格
				var regPassword = /^([A-Za-z0-9\u4e00-\u9fa5]){8,16}$/
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				
				if (this.registerData.email != '' && !regEmail.test(this.registerData.email)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.registerData.email = ''
					return;
				} 
				// else if (!this.registerData.email || !this.registerData.password) {
				// 	// alert("");
				// 	//已经全局加载了element-plus
				// 	this.$message({
				// 		message: "请输入邮箱和密码"
				// 	})
				// 	return;
				// }
				else if (!regPassword.test(this.registerData.password)) {
					this.$message({
						message: '请输入正确的密码格式',
						type: 'error'
					})
					return;
				} else if (this.registerData.password !== this.registerData.confirmPassword) {
					this.$message({
						message: '前后两次密码输入不一致',
						type: 'error'
					})
					this.ableRegister=true;
					this.passwordMessage='前后两次密码输入不一致';
					return;
				}
				this.passwordMessage='';
				this.ableRegister=false;
			},
			checkCodeBlur() {//邮箱验证码失去焦点事件
				if (this.registerData.inputCheckCode == '' || this.registerData.inputCheckCode ==null) {
					this.$message({
						message: '请输入验证码',
						type: 'warning'
					})
					return;
				}
				this.$axios.get('/api/user/checkCode',{
					params:{
						checkCode:this.registerData.inputCheckCode
					}
				}).then(res=>{
					console.log("res="+res)
					if(res.message==true){
						this.ableRegister = false;
						this.$message({
							message:'验证码正确',
							type:'success'
						})
					}else{
						this.ableRegister = true;
						this.$message({
							message:'验证码错误',
							type:'warning'
						})
					}
				})
			},
			register() {
				console.log("email=" + this.registerData.email)
				console.log("pssword=" + this.registerData.password + ",confirmPassword=" + this.registerData
					.confirmPassword);
				//密码规则：1 长度8-16位 2.包含字母和数字  3.前后不能有空格
				var regPassword = /^([A-Za-z0-9\u4e00-\u9fa5]){8,16}$/
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

				if (this.registerData.email != '' && !regEmail.test(this.registerData.email)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.registerData.email = ''
					return;
				} else if (!this.registerData.email || !this.registerData.password) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "请输入邮箱和密码"
					})
					return;
				} else if (!regPassword.test(this.registerData.password)) {
					this.$message({
						message: '请输入正确的密码格式',
						type: 'error'
					})
					return;
				} else if (this.registerData.password !== this.registerData.confirmPassword) {
					this.$message({
						message: '前后两次密码输入不一致',
						type: 'error'
					})
					// this.registerData.email = ''
					return;
				}
				console.log("inputCheckCode=" + this.registerData.inputCheckCode)
				console.log("checkCode=" + this.registerData.checkCode)
				// if (this.registerData.inputCheckCode!==null||this.registerData.inputCheckCode!=='' ) {
				// 	this.$message({
				// 		message: '请先获取取验证码',
				// 		type: 'error'
				// 	})
				// 	return;
				// }
				if (this.registerData.inputCheckCode == '' || this.registerData.inputCheckCode ==null) {
					this.$message({
						message: '请输入验证码',
						type: 'warning'
					})
					return;
				}
				if(this.switchBtn ==false){
					this.$message({
						message: '请同意所有条款',
						type: 'warning'
					})
					return;
				}
				
				
				// let data = qs.stringify(this.registerData)
				this.$axios.get('/api/user/register', {
						params: {
							email: this.registerData.email,
							password: this.registerData.password,
							inputCheckCode: this.registerData.inputCheckCode,
							invitationCode: this.registerData.invitationCode,

						}
					})
					.then(data => {
						console.log("data=" + data)
						if(data.message=='注册成功'){
							this.$message({
								message: '注册成功,进入登录页面',
								type: 'success'
							})
							this.$router.push({
								path: '/login'
							})
						}else{
							this.$message({
								message: data.message,
								type: 'error'
							})
						}
						//在前端保存以上两个值，用
					}).catch(error => {
						console.log(error);
						return;
					})
			},
			sendEmail() {
				/**
				 * 点击后给输入的邮箱发送一封带有验证码的的邮件。
					要求：1一个自然日只能给一个邮箱地址发送10封邮件
					2.验证码有效期为15分钟
					3.点击发送后进行60秒倒计时， 此时按钮不可用。倒计时完后显示重新发送
				 */
				if (!this.registerData.email) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "请输入邮箱"
					})
					return;
				}
				var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

				if (this.registerData.email != '' && !regEmail.test(this.registerData.email)) {
					this.$message({
						message: '邮箱格式不正确',
						type: 'error'
					})
					// this.registerData.email = ''
				}
				// let data = qs.stringify(this.registerData)
				console.log("this.registerData.email=" + this.registerData.email);
				this.registerData.inputCheckCode = null;
				this.btnLoading = true;
				this.interCount = this.count;
				this.$axios.get('/api/mail/send', {
						params: {
							email: this.registerData.email,
						}
					})
					.then(data => {
						this.registerData.checkCode = data.checkCode;
						console.log("checkCode=" + this.registerData.checkCode);
						this.interCount = 59;
						let interval = setInterval(() => {
							if (this.interCount <= 1) {
								this.btnLoading = false;
								this.interCount = "重新发送";
								clearInterval(interval);
							}
							if (this.interCount > 0) {
								this.interCount--;
							}
							// setInterval().clear();
						}, 1000)
						//在前端保存以上两个值，用
					}).catch(error => {
						console.log(error);
					})
				// this.$router.push("/register");
			},
			login() {
				this.$router.push("/login");
			},
			// register() {
			// 	let data = qs.stringify(this.user);
			//	@requestBody
			// 	this.$axios.get('/api/user/list', data)
			// 		.then(data => {

			// 			// }
			// 		}).catch(error => {
			// 			console.log("error=" + error)
			// 		})
			// }
		}
	}
</script>

<style>
	.el-image{
		float:left;
	}
	#background {
		margin-top: 20px;
		width: 700px;
		height: 600px;
		/* background-image: url(../assets/background.jpg); */
	}

	.body {
		display: flex;
		flex-flow: row wrap;
		margin-top: 20px;
	}

	.register-container {
		display: flex;
		justify-content: center;
		position: relative;
		align-items: center;
		top: 10px;
		margin: 0 auto;
		width: 600px;
		height: 600px;
		border: gray solid 1px;
		border-radius: 5px;
	}
	.passwordMessage{
		color:red;
	}
	.top {
		display: flex;
		justify-content: center;
	}

	.register-button {
		display: flex;
		justify-content: center;

	}
</style>
